<template>
  <div id="app">
    <navSimple :message="steps"></navSimple>
    <div class="stepBox">
        <div class="stepAdd stepOn step">
          地址
        </div>
        <div class="stepOrder step" :class="{'stepOn':payListStepOn}">
          订单
        </div>
        <div class="stepPay step" :class="{'stepOn':paymentStepOn}">
          付款
        </div>

    </div><div class="mainCon">
         <router-view @payListCreated="showPayListLine()" @paymentCreated="showPaymentLine()">
        </router-view> 
    </div>
   
  </div>
</template>

<script>
import 'common/css/reset.css';
import 'common/css/iconfont.css';
import navSimple from "components/units/navSimple"
var _user   =require("common/util/server/userServer.js");
var _mm     =require("common/util/mm.js");
  export default {
    name: 'app',
    data(){
      return{
        steps:"收货地址",
        paymentStepOn:false,
        payListStepOn:false,
      }
    },
    watch:{
      "$route"(to,from){
        if (to.path =="/" || to.path == "/address") {
        this.payListStepOn= false;
        this.steps="收货地址";
        };
        if(to.path =="/payList" ){
          this.payListStepOn= false;
        this.paymentStepOn= false;
        this.steps="确认订单"
        }

      }

    },
    methods:{
      showPayListLine(){
     
        this.payListStepOn= true;
        this.steps="确认订单";
      },
      showPaymentLine(){
        this.payListStepOn= true;
        this.paymentStepOn= true;
        this.steps="付款"
      },
    },
    created(){
      this.$router.push("/address");
    },
    components: {
    navSimple
    }
  }
</script>

<style lang="stylus">
 #app
  width:100%
  min-height:100%
  background:rgb(250, 250, 250)
  .stepBox
    height:30px
    width:100%
    display:flex
    background:#fff
    border-bottom:.5px solid #bfbfbf
    .step
      flex:1
      line-height:30px
      height:30px
      text-align:center
      color:#bfbfbf
      font-size:18px
      &.stepOn
        border-bottom:2px solid rgb(222,64,43)
        color:rgb(222,64,43)
  .mainCon
    width:100%
    
        

        
  

</style>
